@import 'mixins';

// cx-spinner color variables
$cx-spinner-border-color: 'primary' !default;
$cx-spinner-border-color-background: 'light' !default;
$cx-spinner-border-color--secondary: 'secondary' !default;

/* IDEAS TO EXTEND
  - sizing (variants: small, medium, big)
  - theme (variants: primary, secondary)
*/

.loader,
.loader:after {
  margin: 0 auto;
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 30px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-width: 1.1em;
  border-style: solid;
  @include var-color('border-top-color', $cx-spinner-border-color-background);
  @include var-color(
    'border-bottom-color',
    $cx-spinner-border-color-background
  );
  @include var-color('border-right-color', $cx-spinner-border-color-background);
  @include var-color('border-left-color', $cx-spinner-border-color);
  transform: translateZ(0);
  animation: load8 1.1s infinite linear;
}
@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
